<template>
  <div>
    <form action="">
      <ul class="formMsg-container form-cells" @change="setpatientInfo">
      <!--start 患者性别 -->
        <li class="form-cell form-cell-sex">
          <div class="sex-name"><span>*</span>患者性别:</div>
          <div class="sex-content">
            <div>
              <input type="radio" name="sex" class="check-box" id="men"  value="1" v-model="patientInfo.sex">
              <label for="men" :class = "patientInfo.sex=== '1' ? 'sexselect':''">
                <span>男</span>
                <div class="checkBox" v-show="patientInfo.sex === '1'">
                  <img :src="checkedImg" alt=""/>
                </div>
              </label>
            </div>
            <div>
              <input type="radio" name="sex"  class="check-box" id="wemen" v-model="patientInfo.sex" value="2">
              <label for="wemen" :class = "patientInfo.sex=== '2' ? 'sexselect':''">
                <span>女</span>
                <div class="checkBox" v-show="patientInfo.sex === '2'">
                  <img :src="checkedImg" alt=""/>
                </div>
              </label>
            </div>
          </div>
        </li>
      <!--end 患者性别 -->
      <!--start 患者姓名 -->
        <li class="form-cell">
          <div class="form-cell__hd"><span>*</span>患者姓名:</div>
          <div class="form-cell__ft">
            <input type="text" v-model.trim="patientInfo.realname" placeholder="请填写患者姓名" maxlength="10" @blur="requireMsg('realname')">
          </div>
        </li>
      <!--end 患者姓名 -->
      <!--start 患者年龄 -->
        <li class="form-cell">
          <div class="form-cell__hd"><span>*</span>患者年龄:</div>
          <div class="form-cell__ft">
            <input type="number" v-model.number = "patientInfo.age" placeholder="请填写患者年龄"  min="1" @blur = "requireMsg('age')">
          </div>
        </li>
      <!--end 患者年龄 -->
      <!--start 患者手机号 -->
        <li class="form-cell">
          <div class="form-cell__hd"><span>*</span>手机号码:</div>
          <div class="form-cell__ft">
            <input type="number" v-model.number = "patientInfo.phone" placeholder="请填写患者手机号码" @blur = "requireMsg('tel')">
          </div>
        </li>
      <!--end 患者手机号 -->
      <!--start 患者所患疾病 -->
        <li class="form-cell">
          <div class="form-cell__hd"><span style="color:#fff;">*</span>所患疾病:</div>
          <div class="form-cell__ft textarea-box">
            <textarea name="" id="textarea" cols = "19" rows="2" placeholder="请填写症状或疾病，没有可以不填" v-model="patientInfo.diseaseDesc" maxlength="20" style="font-size:15px;">
            </textarea>
            <div class="tip-text">{{patientInfo.diseaseDesc.length}}/20</div>

          </div>
        </li>
      <!--end 患者所患疾病 -->
      </ul>
    </form>
  </div>
</template>

<script>
import checkedImg from '@/assets/images/check.png'
export default {
  created () {
    // 页面加载后，获取sessionStorage赋值给患者信息
    let sessionInfo = sessionStorage.getItem('infos')
    // this.patientInfo= sessionInfo ? sessionInfo : this.patientInfo
  },
  data () {
    return {
      checkedImg: checkedImg,
      patientInfo:{sex: '1', realname: '', age: '', phone: '', diseaseDesc: ''}
    }
  },
  methods: {
    requireMsg (type) {
      if (type === 'realname') {
        if(this.patientInfo.realname.toString().length<2 || this.patientInfo.realname.toString().length>10)
          this.$toast({message:'请输入2-10位的名字',position:'top'})
      }
      if (type === 'age') {
        if(!this.patientInfo.age || parseInt(this.patientInfo.age) < 1 || parseInt(this.patientInfo.age) > 130)
          this.$toast({message:'请输入范围为1-130的年龄',position:'top'})
      }
      if (type === 'tel') {
        if(this.patientInfo.phone && this.patientInfo.phone.toString().length !== 11)
          this.$toast({message:'请输入11位长度的手机号',position:'top'})
      }
    },
    // 使用change方法
    setpatientInfo () {
      let requirerealname = this.patientInfo.realname.length< 11 && this.patientInfo.realname.length>1 ? true : false
      let requireage =  0<this.patientInfo.age && this.patientInfo.age<130
      let requiretel = false
      if(this.patientInfo.phone.toString().length == 11) requiretel = true
      // 用来判断开始对话按钮是否可以点击
      let requireAll = requiretel && requirerealname && requireage
      // 当表单change时，将用户信息和requireAll发送到msgStepTwo.vue页面
      this.$emit('getpatientInfo',{patientInfo:this.patientInfo,requireAll})
    }
  }
}
</script>

<style scoped lang="stylus">
  .formMsg-container
    background: #fff
    padding: 0 12px
    .form-cell
      margin-top: 10px
      width: 100%
      overflow: hidden
      border-bottom: 1px solid #e4e4e4
      line-height: 40px
      display: flex
      .form-cell__hd
        font-size: 0.9375rem
        line-height: 30px
        width: auto
        span
          color: #e8541e
          margin-right: 5px
      .form-cell__ft
        flex: 1
        margin-left: 10px
        input,textarea
          line-height: 30px
          box-sizing :border-box
          border:none
          outline:none
          font-size: 0.9375rem
      .textarea-box
        position: relative
        // padding-bottom: 10px
        color: #666
        textarea
          width: 100%
          line-height: 30px
          // margin-top: 5px
          font-size: 0.9375rem
          // border: 1px solid red
        .tip-text
          position: absolute
          right: 10px
          bottom: -6px
          font-size: 0.9375rem
          color: #9da6b8
    .form-cell-sex
        height: 50px
        line-height: 50px
        margin-top: -10px
      .sex-name
        float:left
        span
          color: #e8541e
          margin-right: 5px
      .sex-content
        float: left
        margin-left: 10px
        border-radius : 5px
        div
          display: inline-block
          width: 60px
          height: 25px
          margin-left: 5px
          line-height: 25px
          text-align: center
          color: #ddd
          .check-box
            display: none
            color: #666
            & + label
              display: block
              width: 60px
              height: 25px
              border-radius: 4px
              border: 1px solid #ddd
              position: relative
              .checkBox
                position: absolute
                bottom: 0
                right: 0
                width:12px
                height: 12px
                img
                  width: 100%
              &.sexselect
                color: #108ee9
                border-color: #108ee9
  .tips
    line-height: 41px
    font-size: 0.8125rem
    color: #666
</style>
